<template>
  <div class="explain-and-publicize">
    <div class="banner">
      <div class="title-t">理论宣传</div>
      <!-- <div class="title-b">理论宣传 推广普及社会科学理论 提高人们对客观世界规律的认识</div> -->
    </div>

    <!-- 宣讲动态 -->
    <div class="common-title main-wrapper">
      <!-- <div class="title"><span><span>宣讲</span>动态</span>/Presentation dynamics</div> -->
      <div class="title"><span><span>宣讲</span>动态</span></div>
      <div class="more" @click="newTab('/trends-list?type=publicize')">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="trends main-wrapper">
      <div class="trends-l">
        <div class="view">
          <swiper :modules="viewModules" :navigation="viewNavigation" :pagination="{ clickable: false }"
            :thumbs="{ swiper: thumbsSwiper }" autoplay>
            <swiper-slide v-for="(preItem, preIndex) in preachNewList" :key="preIndex">
              <div class="view-box" @click="toTrends(preItem)">
                <div class="date flex-center">{{ format(preItem.pubDate) }}</div>
                <div class="title otw-1">{{ preItem.name }}</div>
                <div class="desc otw-3">{{ extractText(preItem.content) }}</div>
                <img :src="getImageUrl(preItem.newsPicture)">
              </div>
            </swiper-slide>
          </swiper>
          <div class="button-group">
            <!-- 如果需要导航按钮 -->
            <div class="button-prev">
              <el-icon>
                <Back />
              </el-icon>
            </div>
            <div class="button-next">
              <el-icon>
                <Right />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="thumbs">
          <swiper :modules="thumbsModules" @swiper="setThumbsSwiper" :slides-per-view="4" :space-between="16">
            <swiper-slide v-for="(preItem, preIndex) in preachNewList" :key="preIndex">
              <div class="thumbs-item">
                <div class="thumbs-t">
                  <div class="date">{{ format(preItem.pubDate) }}</div>
                  <div class="arrow"></div>
                </div>
                <div class="thumbs-b otw-2">{{ preItem.name }}</div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <div class="trends-r">
        <div class="more-function">
          更多功能
          <div class="line"></div>
          <!-- <div class="desc">More function</div> -->
        </div>
        <div class="common-r-title">
          宣讲点单
        </div>
        <div class="function-list">
          <div class="function-item" @click="newTab('/explain-and-publicize/publicize-course')">
            <img src="@/assets/images/front/diandan.png">
            <div class="fun-item-title">点单</div>
          </div>
          <div class="function-item" @click="goBackendSubmitted">
            <img src="@/assets/images/front/submitted.png">
            <div class="fun-item-title">报送</div>
          </div>
        </div>
        <div class="common-r-title">
          基层理论宣讲先进申报
        </div>
        <div class="function-list">
          <div class="function-item" @click="newTab('/backend/publicize-collectiveness')">
            <img src="@/assets/images/front/jiti.png">
            <div class="fun-item-title">集体</div>
          </div>
          <div class="function-item" @click="newTab('/backend/publicize-personal')">
            <img src="@/assets/images/front/xianjinggeren.png">
            <div class="fun-item-title">先进个人</div>
          </div>
          <div class="function-item" @click="newTab('/backend/publicize-report')">
            <img src="@/assets/images/front/baogao.png">
            <div class="fun-item-title">报告</div>
          </div>
          <div class="function-item" @click="newTab('/backend/publicize-video')">
            <img src="@/assets/images/front/weishiping.png">
            <div class="fun-item-title">微视频</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 宣讲课程 -->
    <div class="common-title main-wrapper">
      <!-- <div class="title"><span><span>宣讲</span>课程</span>/Lecture course</div> -->
      <div class="title"><span><span>宣讲</span>课程</span></div>
      <div @click="newTab('/explain-and-publicize/publicize-course')" class="more">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="course main-wrapper">
      <swiper :modules="[Autoplay]" :spaceBetween="35" :slidesPerView="3" :autoplay="{ pauseOnMouseEnter: true }">
        <swiper-slide v-for="(courseItem, courseIndex) in courseList" :key="courseIndex"
          @click="toCourseDetail(courseItem)" class="course-item">
          <div class="course-item-top">
            <el-image style="width: 276px;height: 191px;border-radius: 7px 7px 0 0;"
              :src="getImageUrl(courseItem.coverUrl)">
              <template #error>
                <img src="/images/course_default.png" style="width: 100%; height: 100%;">
              </template>
            </el-image>
            <!-- <img :src="getImageUrl(courseItem.coverUrl)"> -->
          </div>
          <div class="course-item-bottom">
            <div class="title otw-1">{{ courseItem.title }}</div>
            <div class="position otw-1">{{ courseItem.expertInfo.name }}·{{ courseItem.expertInfo.expertTitle }}</div>
            <div class="opera">
              <span>{{ courseTypeList.dict[courseItem.type] }}</span>
              <el-button type="primary" round @click.stop="reservationCourse(courseItem)">预约</el-button>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>

    <!-- 宣讲专家 -->
    <div class="common-title main-wrapper">
      <!-- <div class="title"><span><span>宣讲</span>专家</span>/Lecture experts</div> -->
      <div class="title"><span><span>宣讲</span>专家</span></div>
      <div class="more" @click="newTab('/expert-database')">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div>
    </div>
    <div class="experts main-wrapper">
      <div @click="changeExpertType(typeItem)" v-for="(typeItem, experIndex) in expertsTypeList" :key="experIndex"
        :class="['experts-type', experTypeActive == typeItem ? 'active' : '']">
        {{ typeItem }}
      </div>
      <div class="expert-list">
        <div v-for="(experItem, experIndex) in expertsList" :key="experIndex" @mouseenter="courseHover(experItem.id)"
          @click="toExpert(experItem.id)" :class="['expert-item', experItem.expertType == '宣讲专家' ? 'is-explain' : '']">
          <!-- <img :src="showExpertAvator(experItem)" :onerror="showExpertAvator(experItem, true)"> -->
          <el-image style="margin: 14px auto 0;width: 221px;height: 253px;display: block;"
            :src="showExpertAvator(experItem)" fit="cover">
            <template #error>
              <img src="/images/expert_default.png" style="width: 100%; height: 100%;">
            </template>
          </el-image>
          <div class="expert-card">
            <div class="expert-name flex-center">{{ experItem.name }}</div>
            <span class="overflow-card label-value otw-2">{{ experItem.expertTitle }}</span>
            <span class="hidden">
              <div class="otw-2">
                <span class="label">职称：</span>
                <span class="label-value">{{ experItem.expertTitle }}</span>
              </div>
              <div class="otw-1" :title="experItem.researchDirection">
                <span class="label">研究方向：</span>
                <span class="label-value">{{ experItem.researchDirection }}</span>
              </div>
              <div class="otw-1" style="display: flex;justify-content: space-between;">
                <div>
                  <span class="label-value">成果总量：</span>
                  <span class="label-value">{{ experItem.totalAchievements }}</span>
                </div>
                <div>
                  <span class="label-value">被引频次：</span>
                  <span class="label-value">{{ experItem.timesCited }}</span>
                </div>
              </div>
              <div class="otw-1" style="display: flex;justify-content: space-between;">
                <div>
                  <span class="label-value">H指数：</span>
                  <span class="label-value">{{ experItem.hIndex ?? 0 }}</span>
                </div>
                <div>
                  <span class="label-value">G指数：</span>
                  <span class="label-value">{{ experItem.gIndex ?? 0 }}</span>
                </div>
              </div>
              <div class="otw-1">
                <span class="label-value">成果下载量：</span>
                <span class="label-value">{{ experItem.downloadCount }}</span>
              </div>
            </span>
          </div>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="expertCourse" class="up-to-date">
          <div class="tag flex-center">专家最新宣讲</div>
          <div class="title otw-1">{{ expertCourse.expertName }} {{ expertCourse.title }}
          </div>
          <div class="desc otw-3">{{ expertCourse.description }}</div>
          <div class="info-more">
            <div class="date">{{ format(expertCourse.createTime) }}</div>
            <div @click="toCourseDetail(expertCourse)" class="check-more">
              查看更多
            </div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
    <!-- 宣讲实践基地 -->
    <div class="common-title main-wrapper">
      <!-- <div class="title"><span><span>宣讲</span>实践基地</span>/Lecture and Practice Base</div> -->
      <div class="title"><span><span>宣讲</span>实践基地</span></div>
      <!-- <div class="more">
        <div class="line"></div>
        <span>查看更多</span>
        <div class="line"></div>
      </div> -->
    </div>
    <div class="base main-wrapper">
      <div class="flex-center">
        <div @click="changeLocaType(0)" :class="['location-type', baseType == 0 ? 'active' : '']">实践基地</div>
        <div @click="changeLocaType(1)" :class="['location-type', baseType == 1 ? 'active' : '']">宣讲团队</div>
      </div>
      <div class="location-main">
        <div v-show="baseType == 0" id="base-map" class="location-c"></div>
        <div v-if="baseType == 0" class="location-r">
          <el-scrollbar view-style="width: 100%;padding-left: 24px;padding-right: 23px;" height="100%">
            <div v-for="(baseItem, baseIndex) in baseLocationList" :key="baseIndex" @click="showMapWindow(baseItem)"
              :class="['base-item', currentWindow.name == baseItem.name ? 'active' : '']">
              <!-- <img class="base-img" :src="getImageUrl(baseItem.picUrl)"> -->
              <el-image style="width: 100%;height: 145px;" :src="getImageUrl(baseItem.picUrl)" fit="cover">
                <template #error>
                  <img src="/images/course_default.png" style="width: 100%; height: 100%;">
                </template>
              </el-image>
              <div class="base-name">{{ baseItem.name }}</div>
            </div>
          </el-scrollbar>
        </div>
        <div v-if="baseType == 1" class="team-list">
          <el-scrollbar view-style="padding-right: 31px;" height="100%">
            <div v-for="(teamItem, teamIndex) in teamLocationList" :key="teamIndex" class="team-item">
              <div class="img-container">
                <!-- <img :src="getImageUrl(teamItem.coverUrl)" class="team-img"> -->
                <el-image style="width: 100%;height: 100%;" :src="getImageUrl(teamItem.coverUrl)" fit="cover">
                  <template #error>
                    <img src="/images/course_default.png" style="width: 100%; height: 100%;">
                  </template>
                </el-image>
                <div class="img-title otw-1">{{ teamItem.name }}</div>
              </div>
              <div class="team-content">
                <div class="team-title otw-1">{{ teamItem.name }}</div>
                <div class="info-list">
                  <div class="info-item  otw-1" :title="teamItem.responsibleUnit">
                    <span class="label">责任单位：</span>{{ teamItem.responsibleUnit }}
                  </div>
                  <div class="info-item" :title="teamItem.memberShip">
                    <span class="label">成员情况：</span>{{ teamItem.memberShip }}
                  </div>
                  <div class="info-item  otw-1" :title="format(teamItem.creationTime)">
                    <span class="label">成立时间：</span>{{ format(teamItem.creationTime) }}
                  </div>
                  <div class="info-item otw-1" :title="teamItem.preachObject">
                    <span class="label">宣讲对象：</span>{{ teamItem.preachObject }}
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
  <CourseAppointment :courseId="appointmentCourseId" :expertId="appointmentExpertId" :courseName="appointmentCourseName"
    v-model:visible="reservationVis" />
</template>
<script>
export default { name: 'ExplainAndPublicize' }
</script>
<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { Back, Right } from '@element-plus/icons-vue'
import { useSystemStore } from '@/stores/modules/system.js';
import { format } from '@/plugins/moment.js'
import { http } from '@/utils/http/index.js'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation, Thumbs } from 'swiper/modules';
import 'swiper/css'
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import CourseAppointment from '@/components/CourseAppointment.vue';
import { extractText, getImageUrl, showExpertAvator } from '@/utils/index.js'
import { useAuthStore } from '@/stores/modules/auth.js';

const systemStore = useSystemStore()

/* 用户信息 */
const authStore = useAuthStore()

/**设置头部 */
systemStore.headerType = 'xuanchuan'
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'
const newTab = url => window.open(url)

const goBackendSubmitted = () => {
  let url = ''
  const actions = authStore.userInfo.actions
  if (!actions) return ElMessage.warning("请先登录")

  const isSubmittedAdd = actions.find(item => item.id == '2-3-1')
  const isSubmittedApproval = actions.find(item => item.id ==
    '1-3-3')

  if (isSubmittedAdd || (isSubmittedAdd && isSubmittedApproval)) {
    url = '/backend/publicize-submitted'
  } else if (isSubmittedApproval) {
    url = '/backend/publicize-submitted-approval'
  } else {
    return ElMessage.warning("您未获得相应模块权限，请联系管理员配置！")
  }

  newTab(url)
}

/**--------------宣讲动态 */
// const dynamicsList = ref([])
const viewModules = [Autoplay, Pagination, Navigation, Thumbs]
const viewNavigation = {
  nextEl: '.button-next',
  prevEl: '.button-prev',
}
const thumbsModules = [Thumbs]
const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
  thumbsSwiper.value = swiper;
};
const preachNewList = ref([])
http.$POST('/Preach/GetPreachNewList', { pageSize: 4, pageIndex: 1 }).then(res => {
  if (res.isError) return
  preachNewList.value = res.result.dataLst
})

/**------------宣讲课程 */
const courseList = ref([])
http.$POST('/Preach/GetPreachCourseList', {
  dfi: {
    logic: 0,
    filters: [
      // 查询已上架
      { field: 'status', operator: 8, value: '1' },
    ]
  }, type: '', pageSize: 8, pageIndex: 1
}).then(res => {
  if (res.isError) return
  courseList.value = res.result.dataLst.map(el => {
    const temp = { ...el, expertInfo: ref({}) }
    getExpertDetails(el.expertId).then(exRes => temp.expertInfo.value = exRes)
    return temp
  })
})

const courseTypeList = ref({ options: [], dict: {} })
http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
  if (res.isError) return
  courseTypeList.value = {
    options: res.result.dataLst,
    dict: res.result.dataLst.reduce((pre, next) => ({ ...pre, [`${next.id}`]: next.courseTypeName }), {})
  }
})

/**去动态详情页 */
const toTrends = (item) => {
  window.open('/trends-list/trends-details?type=publicize&id=' + item.id)
}

const toCourseDetail = (item) => {
  window.open(`/explain-and-publicize/course-details?id=${item.id}`)
}

/**预约课程 */
const reservationVis = ref(false)
const appointmentCourseId = ref('')
const appointmentExpertId = ref('')
const appointmentCourseName = ref('')
const reservationCourse = (item) => {
  appointmentCourseId.value = item.id
  appointmentExpertId.value = item.expertId
  appointmentCourseName.value = item.title
  reservationVis.value = true
}

/**-------------宣讲专家 */
const expertsTypeList = ref(['中国共产党', '马克思主义哲学', '政治学'])
const experTypeActive = ref('')

const expertsList = ref([])
const getExpertList = () => {
  http.$POST('/Preach/GetExpertList', {
    dfi: {
      logic: 0,
      filters: [
        { field: 'subject', operator: 0, value: experTypeActive.value },
        { field: 'expertType', operator: 8, value: '宣讲专家' },
      ]
    }, expertType: experTypeActive.value, pageSize: 5, pageIndex: 1
  }).then(res => {
    if (res.isError) return
    expertsList.value = res.result.dataLst.map(item => item.expert)
  })
}
const getExpertDetails = (expertId) => new Promise(reslove => {
  http.$GET('/Preach/GetExpertDetail', { id: expertId }).then(res => {
    if (res.isError) return
    reslove(res.result ?? {});
  })
})

getExpertList()
const changeExpertType = (expertItem) => {
  experTypeActive.value == expertItem ? experTypeActive.value = '' : experTypeActive.value = expertItem
  getExpertList()
}

const toExpert = (id) => {
  window.open('/expert-database/expert-details?id=' + id)
}

// 悬浮专家展示最新课程
const expertCourse = ref('')
const courseHover = (expertId) => {
  http.$POST('/Preach/GetPreachCourseList', {
    pageIndex: 1,
    pageSize: 1,
    dfi: {
      logic: 0,
      filters: [
        { field: 'expertId', operator: 8, value: expertId },
        /**已上架的课程 */
        { field: 'status', operator: 8, value: 1 },
      ]
    }
  }).then(res => {
    if (res.isError) return
    const dataLst = res.result.dataLst
    if (dataLst.length > 0) {
      expertCourse.value = dataLst[0]
    } else {
      expertCourse.value = ''
    }
  })
}

/* ------------*宣讲实践基地 */
const baseType = ref(0)
let map;
const changeLocaType = (type) => {
  baseType.value = type
  // 清除所有弹窗
  showMapWindow(false)
  setMark()
}

// 团队列表
const teamLocationList = ref([])
// 基地列表
const baseLocationList = ref([])

/**添加标注 */
const marks = []
const setMark = () => {
  // 清除标记
  marks.forEach(markItem => map.removeOverlay(markItem))
  marks.length = 0
  // 创建标记图标
  // eslint-disable-next-line no-undef
  const myIcon = new BMapGL.Icon("/images/map_mark.png", new BMapGL.Size(28.18, 35.23));
  // 根据类型标记坐标
  (baseType.value == 0 ? baseLocationList.value : teamLocationList.value).forEach((item) => {
    // eslint-disable-next-line no-undef
    const marker = new BMapGL.Marker(new BMapGL.Point(item.longitude, item.latitude), { icon: myIcon })
    marks.push(marker)
    map.addOverlay(marker)
    // 添加点击事件
    marker.addEventListener('click', () => showMapWindow(item))
  })
}

/**根据地理信息显示弹窗 */
let customOverlay;
const currentWindow = ref({})
const showMapWindow = (item) => {
  if (customOverlay) map.removeOverlay(customOverlay)
  if (!item) return
  // eslint-disable-next-line no-undef
  customOverlay = new BMapGL.CustomOverlay(createDOM, {
    // eslint-disable-next-line no-undef
    point: new BMapGL.Point(item.longitude, item.latitude),
    opacity: 0.5,
    offsetY: -40,
    properties: {
      title: item.name,
      text: item.text
    }
  });
  map.addOverlay(customOverlay)
  currentWindow.value = item
}
/**创建地图气泡信息dom */
function createDOM() {
  const div = document.createElement('div');
  // eslint-disable-next-line no-undef
  div.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
  div.style.backgroundColor = '#fff';
  div.style.minHeight = '105px';
  div.style.width = '363px';
  div.style.padding = '18px 26px';
  div.style.whiteSpace = 'nowrap';
  div.style.fontSize = '18px';
  div.style.boxShadow = '0px 3px 6px 1px rgba(0,0,0,0.16);';
  div.style.display = 'flex';
  div.style.flexDirection = 'column';
  div.style.gap = '6px';
  div.style.position = 'relative';


  const title = document.createElement('div');
  title.style.display = 'block';
  title.style.fontSize = '20px';
  title.style.fontWeight = '700';
  title.style.color = 'var(--theme-color)';
  div.appendChild(title);
  title.appendChild(document.createTextNode(this.properties.title));


  this.properties.text.forEach(textItem => {
    const span = document.createElement('span');
    const label = document.createElement('span');
    label.style.wordWrap = 'break-word';
    label.style.fontSize = '16px';
    label.style.color = '#525252';
    span.style.wordWrap = 'break-word';
    span.style.fontSize = '16px';
    span.style.fontWeight = 'bold';
    span.style.color = '#525252';
    const spanDiv = document.createElement('span');
    label.appendChild(document.createTextNode(textItem.label + '：'));
    span.appendChild(document.createTextNode(textItem.value));
    spanDiv.appendChild(label);
    spanDiv.appendChild(span);
    div.appendChild(spanDiv)
  })

  const arrow = document.createElement('div');
  arrow.style.position = 'absolute';
  arrow.style.bottom = '-20px';
  arrow.style.left = '50%';
  arrow.style.transform = 'translateX(-50%)';
  arrow.style.width = '0';
  arrow.style.height = '0';
  arrow.style.borderColor = 'white transparent transparent transparent';
  arrow.style.borderStyle = 'solid';
  arrow.style.borderWidth = '10px';
  arrow.style.overflow = 'hidden';
  div.appendChild(arrow);

  return div;
}

/**查询数据 */
const queryMapData = () => {
  /**查询基地列表 */
  http.$POST('/Preach/GetPreachBaseList', {
    dfi: {
      logic: 0,
      filters: [
        { field: 'id', operator: 11, value: 0 },
      ]
    }, pageSize: 10, pageIndex: 1
  }).then(res => {
    if (res.isError) return
    baseLocationList.value = res.result.dataLst.map(item => {
      return {
        ...item, text: [
          { label: '对口支持单位', value: item.supportUnit }
        ]
      }
    })
    setMark()
  })

  /**查询团队列表 */
  http.$POST('/Preach/GetPreachTeamList', {
    dfi: {
      logic: 0,
      filters: [
        { field: 'id', operator: 11, value: 0 },
      ]
    }, pageSize: 10, pageIndex: 1
  }).then(res => {
    if (res.isError) return
    teamLocationList.value = res.result.dataLst.map(item => {
      return {
        ...item, text: [
          { label: '责任单位', value: item.responsibleUnit },
          { label: '成立时间', value: format(item.creationTime) },
          { label: '成员情况', value: item.memberShip },
          { label: '宣传对象', value: item.preachObject }
        ]
      }
    })
    setMark()
  })
}

/**加载百度地图 */
const setBaiduIns = () => {
  // eslint-disable-next-line no-undef
  map = new BMapGL.Map("base-map")
  map.enableScrollWheelZoom(true);
  queryMapData()
  // eslint-disable-next-line no-undef
  map.centerAndZoom(new BMapGL.Point(114.311754, 30.598604), 11)
}

let baduScript;
onMounted(() => {
  baduScript = document.createElement('script');
  baduScript.id = 'baidu-map'
  baduScript.type = 'text/javascript'
  baduScript.src = `https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${import.meta.env.VITE_APP_BAIDU_MAP_AK}&t=${new Date().getTime()}`
  document.body.appendChild(baduScript);
  if (baduScript.readyState) {
    baduScript.onreadystatechange = () => {
      if (baduScript.readyState === "complete" || baduScript.readyState === 'loaded') {
        setBaiduIns()
      }
    }
  } else {
    baduScript.onload = setBaiduIns
  }
})

/**移除百度标签 */
onBeforeUnmount(() => {
  baduScript.remove()
})

</script>
<style lang='scss' scoped>
@import "@/assets/styles/variables.scss";

.explain-and-publicize {
  width: 100%;

  .banner {
    width: 100%;
    min-width: $wrapperWidth;
    height: 370px;
    background-image: url(@/assets/images/front/xuanchuan_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 39px;

    .title-t {
      font-size: 80px;
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 10px;
      text-shadow: 0px 3px 6px #000000;
      -webkit-text-stroke: 1px #FFFFFF;
      margin-bottom: 31px;
    }

    .title-b {
      font-size: 20px;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #FFFFFF;
      letter-spacing: 2px;
    }
  }

  .trends {
    height: 580px;
    margin: 36px auto 65px;
    display: flex;
    justify-content: space-between;

    .trends-l {
      width: 1024px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .view {
        width: 100%;
        height: 423px;
        position: relative;
        border-radius: 3px;
        overflow: hidden;

        .view-box {
          user-select: none;
          border-radius: 3px;
          overflow: hidden;
          position: relative;
          color: #fff;
          cursor: pointer;
          height: 423px;
          background-color: #F8F8F8;
          background-image: url(@/assets/images/front/xuanchuan_swiper_bg.png);
          background-repeat: no-repeat;
          background-position: right 0 bottom 0;
          background-size: 341px 322px;

          .date {
            position: absolute;
            left: 114px;
            top: 84px;
            width: 104px;
            height: 29px;
            font-size: 15px;
            border-radius: 4px;
            border: 1px solid #FFFFFF;
          }

          .title {
            position: absolute;
            left: 114px;
            top: 124px;
            width: 80%;
            font-size: 28px;
            font-family: Source Han Sans SC-Bold, Source Han Sans SC;
            font-weight: bold;
          }

          .desc {
            position: absolute;
            left: 114px;
            top: 189px;
            width: 54%;
            font-size: 16px;
            font-family: Source Han Sans SC-Bold, Source Han Sans SC;
            line-height: 30px;
          }

          img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
          }
        }

        :deep(.swiper) {
          .swiper-pagination.swiper-pagination-bullets {
            left: 48px;
            top: 86px;
            width: unset;

            .swiper-pagination-bullet {
              display: block;
              margin-bottom: 18px;
              width: 10px;
              height: 10px;
            }

            .swiper-pagination-bullet-active {
              background-color: var(--theme-color);
            }
          }
        }
      }

      .thumbs {
        .thumbs-item {
          user-select: none;
          padding: 13px;
          width: 242px;
          height: 126px;
          background: #FAFAFA;
          border-radius: 3px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: all .2s;
          cursor: pointer;

          .thumbs-t {
            display: flex;
            justify-content: space-between;

            .date {
              font-size: 15px;
              padding: 2px 8px;
              color: var(--theme-color);
              border: 1px solid var(--theme-color);
              border-radius: 4px;
            }

            .arrow {
              width: 20px;
              height: 100%;
              background-image: url(@/assets/images/front/right_arrow_red.png);
              background-repeat: no-repeat;
              background-size: 19.31px 6.47px;
              background-position: center bottom 8px;
            }
          }

          .thumbs-b {
            font-size: 16px;
            color: #434343;
            line-height: 26px;
          }
        }

        .swiper-slide-thumb-active {
          .thumbs-item {
            cursor: default;
            background-color: var(--theme-color);

            .thumbs-t {
              .date {
                color: #fff;
                border-color: #fff;
              }

              .arrow {
                background-image: url(@/assets/images/front/right_arrow_white.png);
              }
            }

            .thumbs-b {
              color: #fff;

            }
          }
        }

      }

      // 前进后退
      .button-group {
        position: absolute;
        left: 118px;
        bottom: 59px;
        display: flex;
        gap: 13px;
        z-index: 2;

        .button-next,
        .button-prev {
          width: 33px;
          height: 33px;
          background-color: var(--theme-color);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          cursor: pointer;
          user-select: none;

          &.swiper-button-disabled {
            background-color: unset;
            border: 1px solid #fff;
            cursor: not-allowed;
          }
        }
      }
    }

    .trends-r {
      width: 243px;
      height: 100%;
      background-color: var(--theme-color);
      border-radius: 3px;
      padding: 18px 22px;
      user-select: none;

      .more-function {
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;
        font-family: Source Han Sans SC-Medium, Source Han Sans SC;
        margin-bottom: 45px;

        .line {
          margin: 5px 0;
          height: 3px;
          width: 26px;
          background-color: #fff;
        }

        .desc {
          font-size: 14px;
          font-weight: 100;
          opacity: 0.8;
        }
      }

      .common-r-title {
        font-size: 18px;
        font-weight: 500;
        color: #FFFFFF;
        font-family: Source Han Sans SC-Medium, Source Han Sans SC;
        border-bottom: 2px solid #B6505C;
        padding-bottom: 8px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 64px;
          height: 2px;
          background-color: #fff;
        }
      }

      .function-list {
        margin: 24px 0 45px;
        display: flex;
        flex-wrap: wrap;
        gap: 22px;

        .function-item {
          width: 25%;
          cursor: pointer;
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 33px;
            height: 37px;
            margin-bottom: 13px;
            object-fit: contain;
          }

          .fun-item-title {
            font-size: 12px;
          }
        }
      }
    }
  }

  .course {
    margin: 36px auto 65px;

    .course-item {
      cursor: pointer;
      user-select: none;
      width: 349px !important;
      height: 353px;
      display: inline-block;
      border-radius: 8px;
      overflow: hidden;

      .course-item-top {
        width: 100%;
        height: 233px;
        background: #C4D5FB;
        display: flex;
        align-items: flex-end;
        justify-content: center;

        img {
          width: 276px;
          height: 191px;
          border-radius: 7px 7px 0 0;
          display: block;
          object-fit: cover;
        }
      }

      .course-item-bottom {
        width: 100%;
        height: calc(100% - 233px);
        background: #F8F8F8;
        padding: 16px 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 20px;
          font-weight: 500;
          color: #333333;
        }

        .position {
          font-size: 17px;
          font-weight: 500;
          color: #5C5C5C;
        }

        .opera {
          display: flex;
          justify-content: space-between;

          span {
            font-size: 16px;
            color: #A92835;
          }

          :deep(.el-button) {
            width: 66px;
            height: 22.5px;
          }
        }
      }
    }
  }

  .experts {
    margin-bottom: 42px;

    .experts-type {
      display: inline-block;
      padding: 7px 16px;
      border-radius: 24px;
      margin-right: 22px;
      background-color: #F5F5F5;
      border: 2px solid #F5F5F5;
      color: #464646;
      cursor: pointer;

      &.active {
        border: 2px solid var(--theme-color);
        color: var(--theme-color);
      }
    }

    .expert-list {
      width: 100%;
      display: flex;
      gap: 19px;
      margin-top: 44px;

      .expert-item {
        width: 257px;
        height: 357px;
        background-color: #FCFCFC;
        position: relative;
        overflow: hidden;
        cursor: pointer;

        &::before {
          content: '';
          position: absolute;
          top: 26px;
          right: 4px;
          width: 28px;
          height: 3px;
          background-color: var(--theme-color);
          z-index: 2;
        }

        &.is-explain::after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          width: 56px;
          height: 78px;
          background-image: url(@/assets/images/front/expert_medal.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        img {
          margin: 14px auto 0;
          width: 221px;
          height: 253px;
          object-fit: cover;
          display: block;
        }

        .expert-card {
          width: 100%;
          height: 221px;
          background-color: #FCFCFC;
          position: relative;
          transition: margin-top .3s;
          font-size: 14px;
          padding: 26px 14px 8px;
          display: flex;
          flex-direction: column;
          gap: 6px;

          .hidden {
            display: none;

            >div {
              margin-bottom: 2px;
            }
          }

          .overflow-card {
            display: block;
          }

          .expert-name {
            position: absolute;
            top: -22px;
            left: -1px;
            font-size: 15px;
            width: 95px;
            height: 37px;
            color: #fff;
            background-color: var(--theme-color);
          }

          .label {
            color: #8D8D8D;
          }

          .label-value {
            color: #626262;
          }
        }

        &:hover {
          .overflow-card {
            display: none;
          }

          .hidden {
            display: block;
          }

          .expert-card {
            margin-top: -84px;
          }
        }
      }
    }

    .up-to-date {
      margin-top: 40px;
      width: 100%;
      height: 306px;
      padding: 22px 24px;
      background-color: var(--theme-color);
      background-image: url(@/assets/images/front/up-date-right.png);
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 187px 153px;

      .tag {
        border-radius: 3px;
        width: 104px;
        height: 21px;
        font-size: 14px;
        background-color: #E8C8CB;
        color: #76150C;
        margin-bottom: 32px;
      }

      .title {
        font-size: 28px;
        font-weight: bold;
        color: #FFFFFF;
        margin-bottom: 30px;
        min-height: 38px;
      }

      .desc {
        width: 1119px;
        height: 78px;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        color: #FFFFFF;
        margin-bottom: 30px;
      }

      .info-more {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #FFFFFF;

        .check-more {
          cursor: pointer;
          width: 110px;
          padding-bottom: 10px;
          border-bottom: 2px solid #fff;
          background-image: url(@/assets/images/front/right_arrow_white.png);
          background-repeat: no-repeat;
          background-size: 19.31px 6.47px;
          background-position: right 0 top 6px;
        }
      }
    }
  }

  .base {
    margin-bottom: 48px;

    .flex-center {
      margin-bottom: 28px;
      gap: 22px;

      .location-type {
        padding: 10px 50px;
        background: #E3E3E3;
        font-size: 20px;
        color: #464646;
        position: relative;
        cursor: pointer;
        transition: all .2s;

        &.active {
          cursor: default;
          background-color: var(--theme-color);
          color: #fff;

          &::after {
            border-top-color: var(--theme-color);
          }
        }

        &::after {
          transition: all .2s;
          content: '';
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translateX(-50%);
          width: 0px;
          height: 0px;
          border: 10px solid transparent;
        }
      }
    }

    .location-main {
      display: flex;
      height: 740px;

      .team-list {
        height: 756px;
        width: 100%;
        background: #F8F8F8;
        border-radius: 13px;
        border: 1px solid #D9D9D9;
        padding: 15px 31px;
        padding-right: 0;

        .team-item {
          padding-bottom: 12px;
          border-bottom: 1px solid #E3E3E3;
          margin-bottom: 12px;
          display: flex;
          gap: 60px;
          // cursor: pointer;

          .img-container {
            position: relative;
            width: 261px;
            height: 165px;

            .team-img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .img-title {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              height: 46px;
              background-color: rgba(0, 0, 0, 0.58);
              font-size: 16px;
              font-weight: 500;
              color: #FFFFFF;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .team-content {
            flex: 1;
            width: 0;
            padding-top: 18px;

            .team-title {
              font-size: 24px;
              font-weight: bold;
              color: #2C2C2C;
              margin-bottom: 24px;

              // &:hover {
              //   color: var(--theme-color);
              // }
            }

            .info-list {
              display: flex;
              flex-wrap: wrap;

              .info-item {
                width: 50%;
                margin-bottom: 13px;
                font-size: 20px;
                color: #525252;

                .label {
                  color: #a6a4a4;
                }

              }
            }
          }
        }
      }

      .location-c {
        flex: 1;

        :deep(.BMap_cpyCtrl) {
          span {
            // display: none !important;
            font-size: 12px;

          }
        }
      }

      .location-r {
        width: 281px;
        height: 100%;
        background: #F8F8F8;
        border-radius: 13px;
        border: 1px solid #D9D9D9;
        margin-left: 10px;
        padding: 12px 8px;
        padding-right: 0;
        display: flex;

        :deep(.swiper-wrapper) {
          .swiper-slide {
            height: 194px !important;
          }
        }

        .base-item {
          margin-bottom: 22px;
          width: 100%;
          cursor: pointer;

          .base-img {
            width: 100%;
            height: 145px;
          }

          .base-name {
            margin-top: 6px;
            font-size: 20px;
            font-weight: 500;
            color: #434343;
            text-align: center;
          }
        }
      }
    }
  }

  .common-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 44px auto 54px;

    .title {
      color: #262626;
      font-size: 20px;

      span {
        font-size: 32px;
        font-weight: 600;

        &>span {
          color: var(--theme-color);
        }
      }
    }

    .more {
      color: #262626;
      font-weight: bold;
      font-size: 20px;
      display: flex;
      align-items: center;

      span {
        cursor: pointer;
        margin: 0 22px;
      }

      .line {
        width: 31px;
        border: 1px solid #D3D3D3;
      }
    }
  }
}
</style>